// 热点资讯
import React, { useState } from 'react'
import '../css/LH.css'
import { Pagination } from 'antd';
import Footer from '../component/Footer'
import Store from '../store/index'

export default function Hot() {
    const [data,setData] = useState(Store.getState)
    
    console.log(data.list);
    Store.subscribe(()=>{
        setData(Store.getState())
    })
    return (
        <div>
            <div className="news">
                <div className="pdd-news-outer">
                    <div className="pdd-news-wrapper">
                        <div className="pdd-news-banner">
                            <img src={require("../img/LH/1.jpg").default} alt=""/>
                        </div>
                        {/* 公开信札 */}
                        <div className="pdd-public-letter">
                            <div className="pdd-red-title pn-other-cat">公开信札</div>
                            {
                                data.list.map((item)=>{
                                    return <div className="letter-block" key={item.id}>
                                        <div className="letter-title">{item.name}</div>
                                            <ul className="pn-other-list">
                                                {item.listChildren.map((item)=>{
                                                    return <li className="pn-other-item" key={item.id}>
                                                            <a href="">
                                                                <p className="pn-other-title">{item.other}</p>
                                                            </a>
                                                            <span>{item.time}</span>
                                                        </li>
                                                })}
                                            </ul>
                                    </div>
                                })
                            }
                        </div>
                        {/* 热点资讯 */}
                        <div className="pdd-hot-news">
                            <div className="pdd-red-title pn-other-cat">热点资讯</div>
                            <ul>
                                {
                                    data.list2.map((item)=>{
                                        return <li className="pn-hot-item" key={item.id}>
                                            <img src={item.img} alt=""/>
                                            <div className="pn-hot-right">
                                                <img className="pn-hot-logo" src={require("../img/LH/99.png").default} alt=""/>
                                                <div>
                                                    <p className="pn-hot-title">{item.p1}</p>
                                                    <p className="pn-hot-content">{item.p2}</p>
                                                    <p className="pn-hot-seemore">{item.p3}</p>
                                                </div>
                                            </div>
                                        </li>
                                    })
                                }
                                
                            </ul>
                        </div>
                        {/* 媒体报道 */}
                        <div className="pdd-hot-news">
                            <div className="pdd-red-title pn-other-cat">媒体报道</div>
                            <ul>
                                {
                                    data.list3.map((item)=>{
                                        return <li className="pn-hot-item" key={item.id}>
                                            <a href="">
                                                <p className="pn-other-title">{item.p1}</p>
                                            </a>  
                                            <span>{item.p2}</span>
                                            <span className="pn-other-time">{item.p3}</span>
                                        </li>
                                    })
                                }
                            </ul>
                        </div>
                    </div>
                    <div className="rocket-pagination" style={{padding: "20px 0 80px 0"}}>
                        <Pagination showQuickJumper defaultCurrent={2} total={300} />
                    </div>
                </div>
            </div>
            <Footer />
        </div>
      )
}
